<template>
  <el-col
    class="erp-form-col"
    :class="{feed: feed}"
    :xs="xsColCom"
    :sm="smColCom"
    :md="mdColCom"
    :lg="lgColCom"
    :xl="xlColCom"
    :tag="tag"
  >
    <template v-if="showLabel">
      <el-form-item
        :style="formItemStyleCom"
        :label="label"
        :prop="prop"
        :required="required"
        :label-width="labelWidthCom"
        :rules="rules"
      >
        <slot
          slot="default"
          name="default"
        />
      </el-form-item>
    </template>
    <template v-else>
      <slot
        slot="default"
        name="default"
      />
    </template>
  </el-col>
</template>

<script>
const maxCol = 24;
const blockCol = {span: maxCol};
/**
 * 表单列
 * @author maolin
 */
export default {
  name: "ErpFormCol",
  props: {
    /**
     * 列配置
     * @public
     */
    col: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /**
     * 是否显示表单项标题
     * @public
     */
    showLabel: {
      type: Boolean,
      default: true
    },
    /**
     * 表单样式
     * @public
     */
    formItemStyle: {
      type: Object,
      default () {
        return {
          marginBottom: "4px"
        };
      }
    },
    /**
     * 响应式布局，设置屏幕<768px时的列数，共24列
     * @public
     */
    xsCol: {
      type: Object,
      default (){
        return {span: 24};
      }
    },
    /**
     * 响应式布局，设置屏幕≥768px时的列数，共24列
     * @public
     */
    smCol: {
      type: Object,
      default (){
        return {span: 12};
      }
    },
    /**
     * 自定义元素标签
     * @public
     */
    tag: {
      type: String,
      default: 'div'
    },
    /**
     * 响应式布局，设置屏幕≥992px时的列数，共24列
     * @public
     */
    mdCol: {
      type: Object,
      default (){
        return {span: 8};
      }
    },
    /**
     * 响应式布局，设置屏幕≥1200px时的列数，共24列
     * @public
     */
    lgCol: {
      type: Object,
      default (){
        return {span: 8};
      }
    },
    /**
     * 响应式布局，设置屏幕≥1920px时的列数，共24列
     * @public
     */
    xlCol: {
      type: Object,
      default (){
        return {span: 6};
      }
    },
    /**
     * 表单项标题
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * 栅格占据的列数【已废弃】
     * @public
     */
    spanCol: {
      type: Number,
      default: null
    },
    /**
     * 列属性
     * @public
     */
    prop: {
      type: String,
      default: ''
    },
    /**
     * 是否必填
     * @public
     */
    required: {
      type: Boolean,
      default: false
    },
    /**
     * 列的倍数
     * @public
     */
    block: {
      type: Number,
      default: 1
    },
    /**
     * @private
     */
    feed: {
      type: Boolean,
      default: false,
    },
    /**
     * 表单项标题宽度
     * @public
     */
    labelWidth: {
      type: String,
      default: '100px'
    },
    /**
     * 表单项规则
     * @public
     */
    rules: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    labelWidthCom () {
      if (this.showLabel) {
        return this.labelWidth;
      }  else {
        return '0';
      }
    },
    formItemStyleCom () {
      const defaultConfig = {
        marginBottom: "4px"
      };
      return Object.assign(defaultConfig, this.formItemStyle);
    },
    xsColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.xsCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    smColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.smCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    mdColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.mdCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    lgColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.lgCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    xlColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.xlCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
  }
};
</script>

<style lang="scss" scoped>
    .erp-form-col{
        ::v-deep{
            .el-form-item{
                .el-form-item__label{
                    font-size: var(--font-size);
                    color:#5A6875;
                }
                .el-form-item__content{
                    font-size: var(--font-size);
                }
            }
            .el-radio__label{
                font-size: var(--font-size);
            }
        }
    }
</style>
